<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Drop-down menus</title>
  <style type="text/css">
  
body {}

.menu {
	margin: 5em;
	font:small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
}

.menu ul {
	margin:0;
	padding:0;
	list-style:none;
}

.menu li {
      margin:0;
      padding:1px 1px 0 1px;
      position:relative;
      float:left;
	  height:2em;
	  background:#f0f0f0;
}

.menu li a {
	display:block;
	float:left;
	padding:0 10px;
	line-height:2em;
	color:#333;
	text-decoration:none;
	position:relative;
	z-index: 999;
}

.menu li li {
	position:static;
	float:none;
	display:block;
	padding:0;
}

.menu li li a {
	float:none;
	min-width:7em;
	background:#fff;
}

.menu li ul {
	display:none;
	left:-2000px;
	opacity: 0;
	position:absolute;
	top:2em;
	
	border: 1px solid #888;
	z-index: 500;
	/*
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.15);
	-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.15);
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#D8D8D8')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#D8D8D8');
	*/
	box-shadow: 5px 5px 10px rgba(0,0,0,.15);
}

.menu li:hover ul {
	left:-1px;
	display:block;
	/*-moz-transition: opacity 0.5s ease-in;
	-webkit-transition: opacity 0.5s ease-in;
	-o-transition: opacity 0.5s ease-in;
	transition: opacity 0.5s ease-in;*/
	opacity: 1;
}

.menu li:hover {
	border: 1px solid #888;
	border-bottom: 0;
	padding:0;
}

.menu li:hover a {
	border-bottom: 1px solid #fff;
	color:#000;
	background:#fff;
	z-index: 1001;
}
.menu li:hover li a {
	border: 0;
}
.menu li li:hover {
	border: 0;
}
.menu li li:hover a {
	background:#f0f0f0;
}


#foot
  </style>
</head>

<body>
<div class="menu">
<ul>
  <li><a href="colors.html">Colors</a>
    <ul>
      <li><a href="blue.html">Blue</a></li>
      <li><a href="red.html">Red</a></li>
      <li><a href="yellow.html">Yellow</a></li>
      <li><a href="green.html">Green</a></li>
      <li><a href="purple.html">Purple</a></li>
    </ul>
  </li>
  <li><a href="names.html">Names</a>
    <ul>
      <li><a href="john.html">John</a></li>
      <li><a href="rebecca.html">Rebecca</a></li>
      <li><a href="xavier.html">Xavier</a></li>
    </ul>
  </li>
  <li><a href="cities.html">Cities</a>
    <ul>
      <li><a href="sf.html">San Francsico</a></li>
      <li><a href="ny.html">New York</a></li>
      <li><a href="paris.html">Paris</a></li>
      <li><a href="london.html">London</a></li>
      <li><a href="miami.html">Miami</a></li>
      <li><a href="tokyo.html">Tokyo</a></li>
    </ul>
  </li>
</ul>
</div>

</body>
</html>